<template>
  <view class="tab-page group">

    <view class="header">
      <text class="title">新的圈子成员</text>
    </view>

    <view class="group-tip" v-if="applyList.length===0">
      没有入圈申请
    </view>

    <view class="group-items" v-else>
      <scroll-view class="scroll-bar" @scrolltolower="loadMore" scroll-with-animation="true" scroll-y="true">
        <circle-apply-list-item @onOperate="flush" :apply-list="applyList"></circle-apply-list-item>
      </scroll-view>
    </view>
  </view>
</template>
<script>

import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {UniIcons},
  data() {
    return {
      canLoadMore: true,
      applyList: [],
      queryParams: {
        type: 'approval',
        page: 1,
        size: 10
      }
    }
  },
  methods: {
    loadMore() {
      console.log(this.queryParams)
      if (!this.canLoadMore) {
        return
      }
      this.canLoadMore = false
      this.queryParams.page++
      this.status = 'loading'
      this.$http({
        url: '/circle/apply-list',
        method: 'GET',
        data: this.queryParams

      }).then((res) => {
        this.applyList = this.applyList.concat(res.list)
        console.log(res.hasNextPage)
        if (res.hasNextPage) {
          this.canLoadMore = true
        }
      })
    },

    flush() {
      this.queryParams.page = 1
      this.getList()
    },

    getList() {
      this.status = 'loading'
      this.$http({
        url: '/circle/apply-list',
        method: 'GET',
        data: this.queryParams
      }).then((res) => {
        this.applyList = res.list
      })
    },

  },
  onLoad() {
    this.getList();
  },
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  padding: 5px;
  background-color: #f8f8f8;
  line-height: 50px;
  font-size: 30rpx;
  letter-spacing: 2rpx; /* 字母间距 */
  font-weight: 600;
  border: #dddddd solid 1px;

  .btn-side {
    position: absolute;
    line-height: 60rpx;
    font-size: 28rpx;
    cursor: pointer;

    &.right {
      right: 30rpx;
    }
  }
}

.btn-side {
  position: absolute;
  line-height: 60rpx;
  font-size: 28rpx;
  cursor: pointer;

  &.left {
    left: 30rpx;
  }

  &.right {
    right: 30rpx;
  }
}

.group {
  position: relative;
  border: #dddddd solid 1px;
  display: flex;
  flex-direction: column;


  .group-tip {
    position: absolute;
    top: 400rpx;
    padding: 50rpx;
    text-align: left;
    line-height: 50rpx;
    color: #10AEFF;
    font-size: 30rpx;
  }

  .group-items {
    flex: 1;
    padding: 0;
    border: #dddddd solid 1px;
    overflow: hidden;
    position: relative;

    .scroll-bar {
      height: 100%;
    }
  }
}
</style>
